<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM(针对浏览器)
		 学习主体：针对页面操作比较多---DOM操作
		 JQuery操作DOM：理解：JQ框架改变页面内容效果
		 js基础就可以直接学习，了解函数使用
		 基础函数-----事件源之后出现，事件源语法糖中
		 html()      作用：增加一个元素，覆盖原有html
		 val()       作用：针对input元素，实现修改文本框内容
		 text()      作用：生成为文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex saepe sunt, harum veniam numquam, voluptate neque magnam facere quas dolorum laboriosam. Laborum molestiae iste at dolorum ipsam necessitatibus voluptas odit.</p>
		
		<div style="width: 200px; height: 200px; background: #333;"></div>
		<h3>lorem</h3>
		
		<input type="button" value="按钮2"/>
		<input type="text" value="输入框可以直接写文本"/>
		<script>
			
			 $("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			}); 
			/* 练习1：div  200*200 背景颜色自定，鼠标划过之后，下面内容修改，
			 下面内容修改：<h3>提示，修改为黄颜色*/
        $("div").mouseenter(function(){
			$("h3").html("<h3>黄颜色</h3>")
		});
		
		 /* 练习2： 按钮 文本框   点击按钮，文本增加一行文本*/
		 $("input[type='button']").click(function(){
		//	alert("jq选择器是否选中") 
		$("input[type='text']").val("文本框内容修改")
		 });
		 /* 利用JQ操作DOM（页面效果）：1.元素内容操作（3个函数）
		                         html()
								 val()
								 text()
		                            2.属性操作（4个函数）
								<p align="center">
								attr()
								removeAttr()
								<input checked>
								prop()
								removeProp()
									3.样式操作（4个函数）
									.demo{属性：属性值 ..}
									addClass()
									removeClass()
									toggClass()
									hasClass()
									4.元素样式操作（5个函数）
									css()
									width()和height()
									outerwidth()和outerheight()
									5.（7个函数）
									append()和prepend()
									after()和before()
									remove()和empty()
									placewith()
									6.元素遍历操作（6个函数）
									7.JQ动画操作（7个函数）
		*/
		</script>
	</body>
</html>